<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>网易云</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="./css/header.css" />
		<style>
			.header.top {
				height: 70px;
				background-color: #242424;
				box-sizing: border-box;
				border-bottom: 1px solid #000;
			}

			.topbar {
				display: flex;
				justify-content: space-between;
				height: 69px;
				/* 给子元素设置高度 */
				line-height: 69px;
			}

			.topbar .bar-left {
				display: flex;
			}

			.topbar .bar-left .list {
				display: flex;
			}

			.topbar .bar-left .list .item {
				position: relative;
				display: block;
				color: #ccc;
				font-size: 14px;
				padding: 0 14px;
			}

			.topbar .bar-left .list .item:hover,
			.topbar .bar-left .list .item.active {
				background-color: #000;
				color: #fff;
			}

			.topbar .bar-left .list .item.active::after {
				content: '';
				position: absolute;
				width: 12px;
				height: 7px;
				background: url('./img/topbar.png') -226px 0;
				bottom: -2px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}

			.topbar .bar-left .logo {
				background-image: url('./img/topbar.png');
			}

			.topbar .bar-left .logo a {
				display: block;
				text-indent: -9999px;
				width: 157px;
				padding-right: 20px;
			}

			.topbar .bar-left .icon-hot {
				/* background: url('./img/topbar.png') -190px 0; */
				position: absolute;
				/* width: 28px; */
				/* height: 19px; */
				top: 14px;
				right: -18px;
			}

			/* top右侧 */
			.topbar .bar-right {
				display: flex;
				padding-right: 20px;
				align-items: center;
			}
			.topbar .bar-right .login a {
				color: #787878;
			}
			.topbar .bar-right .login:hover a {
				color: #ccc;
			}
			.topbar .bar-right .login a:hover {
				color: #787878;
				text-decoration: underline;
			}

			.topbar .bar-right .anthor a {
				display: inline-block;
				width: 90px;
				height: 32px;
				color: #ccc;
				border: 1px solid #4f4f4f;
				box-sizing: border-box;
				border-radius: 20px;
				line-height: 32px;
				text-align: center;
				margin: 0 20px;
			}
			.topbar .bar-right .anthor a:hover {
				color: #fff;
				border-color: #fff;
			}

			.topbar .bar-right .search {
				width: 158px;
				height: 32px;
				border-radius: 30px;
				background-color: #fff;
				background-image: url(./img/topbar.png);
				background-position: 0 -99px;
				/* background: #fff url('./img/topbar.png') 0 -99px; */
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 10px;
				box-sizing: border-box;
			}
			.topbar .bar-right .search input {
				width: 118px;
				font-size: 12px;
			}

			/* nav */
			.nav {
				height: 35px;
				line-height: 35px;
				background-color: #c20c0c;
				border-bottom: 1px solid #a40011;
				box-sizing: border-box;
			}
			.navbar {
				box-sizing: border-box;
				padding-left: 175px;
			}
			.navbar .list {
				display: flex;
			}
			.navbar .list .item {
				display: inline-block;
			}
			.navbar .list .item span {
				display: inline-block;
				padding: 0 13px;
				margin: 7px 17px;
				height: 20px;
				line-height: 21px;
				border-radius: 20px;
				color: #fff;
			}
			.navbar .list .item:hover span,
			.navbar .list .item.active span {
				background-color: #9b0909;
			}

			/* banner */
			.banner {
				height: 285px;
				background: url('./img/banner_bg_02.jpeg') center center /
					6000px;
			}
			.banner .area {
				position: relative;
				height: 285px;
				background-color: orange;
			}
			.banner .area .area-left {
				position: relative;
				width: 730px;
			}

			.banner .area-left .img-list {
				display: flex;
				overflow: hidden;
			}
			.banner .area-left .img-list li {
				width: 100%;
				/* 设置了flex-shrink宽度不一定和父元素宽度,需要重新设置 */
				flex-shrink: 0;
			}
			.banner .area-left .img-list .item {
				display: block;
			}
			.banner .area-left .img-list .item img {
				width: 100%;
				height: 285px;
			}

			/* 轮播图点 */
			.banner .area-left .dots-list {
				position: absolute;
				bottom: 5px;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
			}
			.banner .area-left .dots-list li {
				margin: 0 2px;
			}
			.banner .area-left .dots-list .item {
				display: inline-block;
				width: 20px;
				height: 20px;
				background: url('./img/banner_sprite.png') 3px -343px;
			}
			.banner .area-left .dots-list .item.active,
			.banner .area-left .dots-list .item:hover {
				background-position: -16px -343px;
			}

			.banner .area-right {
				position: absolute;
				right: -1px;
				width: 254px;
				height: 285px;
				top: 0;
				bottom: 0;
				background: url('./img/download_sprite.png');
			}

			.banner .area-right .download {
				display: block;
				width: 215px;
				height: 56px;
				margin: 186px 0 0 19px;
				text-indent: -9999px;
			}
			.banner .area-right .download:hover {
				background: url('./img/download_sprite.png') 0 -290px;
			}
			.banner .area-right .desc {
				margin-top: 10px;
				font-size: 12px;
				color: #8d8d8d;
				text-align: center;
			}

			/* 控制器 */
			.banner .control {
				position: absolute;
				width: 37px;
				height: 63px;
				top: 0;
				bottom: 0;
				margin: auto 0;
				background: url(./img/banner_sprite.png);
			}
			.banner .control-left {
				left: -70px;
				background-position: 0 -360px;
			}
			.banner .control-left:hover {
				background-position: 0 -430px;
			}
			.banner .control-right {
				right: -70px;
				background-position: 0 -508px;
			}
			.banner .control-right:hover {
				background-position: 0 -578px;
			}

			/* main */
			.main .area {
				/* height: 500px; */
				border: 1px solid #d3d3d3;
				border-width: 0 1px;
				background-image: url('./img/main_bg.png');
				display: flex;
				justify-content: space-between;
			}
			.main .area .area-left {
				width: 729px;
				padding: 20px 20px 40px;
				box-sizing: border-box;
			}
			.recommend-section .list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 20px 2px;
			}
			.recommend-section .list .item {
				width: 140px;
				margin-bottom: 30px;
			}
			.recommend-section .list .item .top {
				position: relative;
				background-color: red;
			}
			.recommend-section .list .item .top .cover {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				top: 0;
				background: url('./img/cover_sprite.png') 0 0;
			}
			.recommend-section .list .info .icon-music {
				position: relative;
				top: 1px;
				margin-right: 4px;
				cursor: pointer;
			}
			.recommend-section .list .info .icon-play {
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto 0;
				right: 10px;
				cursor: pointer;
			}
			.recommend-section .list .item .top .info {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 27px;
				font-size: 12px;
				color: #ccc;
				background: url('./img/cover_sprite.png') 0 -537px;
				padding-left: 10px;
				display: flex;
				align-items: center;
			}
			.recommend-section .list .item .bottom {
				font-size: 14px;
				margin-top: 8px;
				display: block;
			}
			.recommend-section .list .item .bottom:hover {
				text-decoration: underline;
			}
			.recommend-section .list .bottom .icon-raido {
				position: relative;
				top: 2px;
				margin-right: 5px;
			}
			/* 新碟上架 */
			.disc-section .content {
				height: 186px;
				border: 1px solid #d3d3d3;
				box-sizing: border-box;
				margin: 20px 0;
			}
			.disc-section .content .inner {
				height: 100%;
				box-sizing: border-box;
				border: 1px solid #fff;
				background-color: #f5f5f5;
				padding: 0 25px;
				position: relative;
			}
			.disc-section .content .inner .roller {
				display: flex;
				overflow: hidden;
			}
			.disc-section .content .inner .roller .list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				flex-shrink: 0;
				padding-top: 10px;
			}
			.disc-section .content .inner .roller .list .item {
				width: 118px;
				height: 150px;
				background: url('./img/main_sprite.png') no-repeat -260px 100px;
			}
			.disc-section .roller .list .item .album {
				position: relative;
			}
			.disc-section .roller .list .item .cover {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: url('./img/cover_sprite.png') no-repeat 0 -570px;
			}
			.disc-section .roller .list .item .album .play {
				display: none;
				position: absolute;
				right: 10px;
				bottom: 5px;
				width: 22px;
				height: 22px;
				background: url(./img/icon_sprite.png) 0 -85px;
			}
			.disc-section .roller .list .item .album:hover .play {
				display: block;
			}
			.disc-section .roller .list .item a {
				margin-top: 5px;
				display: block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-right: 10px;
			}
			.disc-section .roller .list .item a:hover {
				text-decoration: underline;
			}
			.disc-section .roller .list .item a.title {
				margin-top: 8px;
				color: #000;
			}
			.disc-section .roller .list .item a.anchor {
				color: #666;
			}
			.disc-section .content .control {
				position: absolute;
				width: 17px;
				height: 17px;
				top: 0;
				bottom: 0;
				margin: auto 0;
				background-image: url(./img/main_sprite.png);
			}
			.disc-section .content .control.control-left {
				background-position: -260px -75px;
				left: 2px;
			}
			.disc-section .content .control.control-right {
				background-position: -320px -75px;
				right: 2px;
			}
			/* 排行榜 */
			.rank-section .content {
				height: 472px;
				margin-top: 20px;
				background: url(./img/rank_bg.png) no-repeat;
				display: flex;
			}
			.rank-section .content .rank {
				width: 230px;
			}
			.rank-section .content .rank .header {
				height: 120px;
				box-sizing: border-box;
				padding: 20px 0 0 20px;
				display: flex;
			}
			.rank-section .content .rank .header .album {
				position: relative;
				width: 80px;
				height: 80px;
			}
			.rank-section .content .rank .header .album img {
				width: 100%;
				height: 100%;
			}
			.rank-section .content .rank .header .cover {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background: url(./img/cover_sprite.png) no-repeat -145px -57px;
			}
			.rank-section .content .rank .header .info .operation {
				margin-top: 12px;
			}
			.rank-section .content .rank .header .info {
				padding: 12px 0 0 18px;
			}
			.rank-section .content .rank .header .info .title {
				color: #333;
			}
			.rank-section .content .rank .header .info .btn {
				display: inline-block;
				background: url(./img/main_sprite.png) no-repeat;
				width: 22px;
				height: 22px;
			}
			.rank-section .content .rank .header .info .play {
				background-position: -267px -205px;
			}
			.rank-section .content .rank .header .info .play:hover {
				background-position: -267px -235px;
			}
			.rank-section .content .rank .header .info .favor {
				background-position: -300px -205px;
				margin-left: 8px;
			}
			.rank-section .content .rank .header .info .favor:hover {
				background-position: -300px -235px;
			}
			.rank-section .content .rank .item {
				height: 32px;
				line-height: 32px;
				display: flex;
				padding-left: 12px;
				padding-right: 5px;
			}
			.rank-section .content .rank .item .no {
				width: 35px;
				text-align: center;
				font-size: 16px;
				color: #666;
			}
			.rank-section .content .rank .item:nth-child(-n + 3) .no {
				color: #f00;
			}
			.rank-section .content .rank .item .song {
				flex: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.rank-section .content .rank .item .song:hover {
				text-decoration: underline;
			}
			.rank-section .content .rank .item:hover .operation {
				display: flex;
			}
			.rank-section .content .rank .item .operation {
				width: 82px;
				/* display: flex; */
				align-items: center;
				display: none;
			}
			.rank-section .content .rank .item .operation .btn {
				width: 17px;
				height: 17px;
				background: url(./img/main_sprite.png) no-repeat;
				margin-right: 8px;
			}
			.rank-section .content .rank .item .operation .btn.play {
				background-position: -267px -268px;
			}
			.rank-section .content .rank .item .operation .btn.add {
				background: url(./img/iconall_sprite.png) no-repeat;
				background-position: 2px -698px;
			}
			.rank-section .content .rank .item .operation .btn.favor {
				background-position: -297px -268px;
			}
			.rank-section .content .rank .list .more {
				height: 32px;
				line-height: 32px;
				text-align: right;
				padding-right: 32px;
			}
			.rank-section .content .rank .list .more a:hover {
				text-decoration: underline;
			}

			.main .area .area-right {
				width: 250px;
			}
			.main .area-right .user-login {
				width: 250px;
				height: 126px;
				background: url('./img/main_sprite.png') 0 0;
			}
			.main .area-right .user-login .desc {
				width: 205px;
				margin: 0 auto;
				padding-top: 16px;
				color: #666;
				font-size: 12px;
				line-height: 22px;
			}
			.main .area-right .btn {
				display: block;
				width: 100px;
				height: 31px;
				line-height: 31px;
				text-align: center;
				font-size: 12px;
				color: #fff;
				background: url(./img/main_sprite.png) 0 -195px;
				margin: 15px auto 0;
				text-shadow: 0 1px 0 #8a060b;
			}
			.main .settle-singer {
				padding: 20px;
			}
			.main .settle-singer .list {
				padding: 5px 0;
			}
			.main .settle-singer .list .item {
				display: flex;
				width: 210px;
				height: 62px;
				margin-top: 15px;
				background-color: #fafafa;
			}
			.main .settle-singer .list .item .info {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-around;
				padding: 3px 12px;
				border: 1px solid #e9e9e9;
				border-left: none;
				overflow: hidden;
			}
			.main .settle-singer .list .item .info .singer {
				font-size: 14px;
				font-weight: 700;
				color: #000;
			}
			.main .settle-singer .list .item .info .desc {
				font-size: 12px;
				color: #666;
				margin-top: 5px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.main .apply {
				width: 210px;
				font-size: 12px;
				font-weight: 700;
				color: #000;
				box-sizing: border-box;
				border-radius: 4px;
				overflow: hidden;
				padding-right: 5px;
				margin-top: 10px;
			}
			.main .hot-anchor {
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="header top">
			<div class="topbar wrapper_01">
				<div class="bar-left">
					<h1 class="logo">
						<a href="#">网易云音乐</a>
					</h1>

					<ul class="list">
						<li><a href="#" class="item active">发现音乐</a></li>
						<li><a href="#" class="item">我的音乐</a></li>
						<li><a href="#" class="item">关注</a></li>
						<li><a href="#" class="item">商城</a></li>
						<li><a href="#" class="item">音乐人</a></li>
						<li>
							<a href="#" class="item">
								下载客户端
								<i
									class="topbar_sprite topbar_icon_hot icon-hot"
								></i>
							</a>
						</li>
					</ul>
				</div>

				<div class="bar-right">
					<div class="search">
						<input type="text" placeholder="音乐/视频/用户/电台" />
					</div>
					<div class="anthor">
						<a href="#">创造者中心</a>
					</div>
					<div class="login">
						<a href="#">登录</a>
					</div>
				</div>
			</div>
		</div>

		<div class="nav">
			<div class="navbar wrapper_01">
				<ul class="list">
					<li>
						<a href="#" class="item active"><span>推荐</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>排行榜</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>歌单</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>主播电台</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>歌手</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>新歌上架</span></a>
					</li>
				</ul>
			</div>
		</div>

		<div class="banner">
			<div class="area warpper_03">
				<div class="area-left">
					<ul class="img-list">
						<li>
							<a href="#" class="item">
								<img src="./img/banner_02.jpeg" alt="" />
							</a>
						</li>
						<li>
							<a href="#" class="item">
								<img src="./img/banner_02.jpeg" alt="" />
							</a>
						</li>
						<li>
							<a href="#" class="item">
								<img src="./img/banner_02.jpeg" alt="" />
							</a>
						</li>
					</ul>

					<ul class="dots-list">
						<li><a href="#" class="item active"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
					</ul>
				</div>

				<div class="area-right">
					<a href="#" class="download">下载客户端</a>
					<p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>

				<a href="#" class="control control-left"></a>
				<a href="#" class="control control-right"></a>
			</div>
		</div>

		<div class="main">
			<div class="area warpper_02">
				<div class="area-left">
					<div class="recommend-section">
						<div class="header_type_02">
							<div class="left-area">
								<h2 class="title">热门推荐</h2>
								<ul class="keywords">
									<li><a href="#" class="item">华语</a></li>
									<li class="line">|</li>

									<li><a href="#" class="item">流行</a></li>
									<li class="line">|</li>

									<li><a href="#" class="item">摇滚</a></li>
									<li class="line">|</li>

									<li><a href="#" class="item">民谣</a></li>
									<li class="line">|</li>

									<li><a href="#" class="item">电子</a></li>
								</ul>
							</div>
							<div class="right-area">
								<a href="#" class="more">更多</a>
							</div>
						</div>

						<div class="list">
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									><i
										class="iconall_sprite icon-raido iconall_sprite_radio"
									></i
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
							<div class="item">
								<div class="top">
									<img
										src="./img/recommend_album_01.jpeg"
										alt="音乐封面"
									/>
									<a class="cover" href="#"></a>
									<div class="info">
										<i
											class="icon_sprite icon-music icon_sprite_music"
										></i>
										<span class="count">62万</span>
										<i
											class="icon_sprite icon-play icon_sprite_play_01"
										></i>
									</div>
								</div>
								<a class="bottom" href="#"
									><i
										class="iconall_sprite icon-raido iconall_sprite_radio"
									></i
									>天气好的话, 把耳机给我一半吧</a
								>
							</div>
						</div>
					</div>

					<div class="disc-section">
						<div class="header_type_02">
							<div class="left-area">
								<h2 class="title">新碟上架</h2>
							</div>
							<div class="right-area">
								<a href="#" class="more">更多</a>
							</div>
						</div>

						<div class="content">
							<div class="inner">
								<div class="roller">
									<ul class="list">
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
									</ul>
									<ul class="list">
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
										<li class="item">
											<div class="album">
												<img
													src="./img/newdisc_album_01.jpeg"
													alt="新碟上架"
												/>
												<a href="#" class="cover"></a>
												<a href="#" class="play"></a>
											</div>

											<p>
												<a href="#" class="title"
													>原神-跌落前往知道 IsLoads
													of the LOST and Forgotten</a
												>
											</p>
											<p>
												<a class="anchor" href="#"
													>HOYO-MIX</a
												>
											</p>
										</li>
									</ul>
								</div>

								<a href="#" class="control control-left"></a>
								<a href="#" class="control control-right"></a>
							</div>
						</div>
					</div>

					<div class="rank-section">
						<div class="header_type_02">
							<div class="left-area">
								<h2 class="title">榜单</h2>
							</div>
							<div class="right-area">
								<a href="#" class="more">更多</a>
							</div>
						</div>

						<div class="content">
							<dl class="rank up-rank">
								<dt class="header">
									<div class="album">
										<img
											src="./img/rank_up.jpeg"
											alt="飙升榜"
										/>
										<a href="#" class="cover"></a>
									</div>

									<div class="info">
										<h3 class="title">飙升榜</h3>
										<div class="operation">
											<a href="#" class="btn play"></a>
											<a href="#" class="btn favor"></a>
										</div>
									</div>
								</dt>
								<dd class="list up-list">
									<ol>
										<li class="item">
											<span class="no">1</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">2</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">3</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">4</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">5</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">6</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">7</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">8</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">9</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">10</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
									</ol>
									<div class="more">
										<a href="#">查看全部 &gt;</a>
									</div>
								</dd>
							</dl>

							<dl class="rank new-rank">
								<dt class="header">
									<div class="album">
										<img
											src="./img/rank_new.jpeg"
											alt="新歌榜"
										/>
										<a href="#" class="cover"></a>
									</div>

									<div class="info">
										<h3 class="title">新歌榜</h3>
										<div class="operation">
											<a href="#" class="btn play"></a>
											<a href="#" class="btn favor"></a>
										</div>
									</div>
								</dt>
								<dd class="list up-list">
									<ol>
										<li class="item">
											<span class="no">1</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">2</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">3</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">4</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">5</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">6</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">7</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">8</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">9</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">10</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
									</ol>
									<div class="more">
										<a href="#">查看全部 &gt;</a>
									</div>
								</dd>
							</dl>

							<dl class="rank origin-rank">
								<dt class="header">
									<div class="album">
										<img
											src="./img/rank_origin.jpeg"
											alt="原创榜"
										/>
										<a href="#" class="cover"></a>
									</div>

									<div class="info">
										<h3 class="title">原创榜</h3>
										<div class="operation">
											<a href="#" class="btn play"></a>
											<a href="#" class="btn favor"></a>
										</div>
									</div>
								</dt>
								<dd class="list up-list">
									<ol>
										<li class="item">
											<span class="no">1</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">2</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">3</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">4</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">5</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">6</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">7</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">8</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">9</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
										<li class="item">
											<span class="no">10</span>
											<a href="#" class="song"
												>再等冬天(Memories)</a
											>
											<div class="operation">
												<a
													href="#"
													class="btn play"
												></a>
												<a href="#" class="btn add"></a>
												<a
													href="#"
													class="btn favor"
												></a>
											</div>
										</li>
									</ol>
									<div class="more">
										<a href="#">查看全部 &gt;</a>
									</div>
								</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="area-right">
					<div class="user-login">
						<p class="desc">
							登录网易云音乐, 可以享受无限收藏的乐趣,
							并且可以同步到手机
						</p>
						<a href="#" class="btn">用户登录</a>
					</div>

					<div class="settle-singer">
						<div class="header_type_01">
							<h3 class="title">入驻歌手</h3>
							<a href="#" class="more">查看全部 &gt;</a>
						</div>
						<ul class="list">
							<li>
								<a href="#" class="item">
									<div class="album">
										<img
											src="./img/singer_01.jpeg"
											alt=""
										/>
									</div>
									<div class="info">
										<div class="singer">张惠妹aMEI</div>
										<div class="desc">
											台湾歌手张惠妹台湾歌手张惠妹台湾歌手张惠妹台湾歌手张惠妹
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="item">
									<div class="album">
										<img
											src="./img/singer_01.jpeg"
											alt=""
										/>
									</div>
									<div class="info">
										<div class="singer">张惠妹aMEI</div>
										<div class="desc">台湾歌手张惠妹</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="item">
									<div class="album">
										<img
											src="./img/singer_01.jpeg"
											alt=""
										/>
									</div>
									<div class="info">
										<div class="singer">张惠妹aMEI</div>
										<div class="desc">台湾歌手张惠妹</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="item">
									<div class="album">
										<img
											src="./img/singer_01.jpeg"
											alt=""
										/>
									</div>
									<div class="info">
										<div class="singer">张惠妹aMEI</div>
										<div class="desc">台湾歌手张惠妹</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="item">
									<div class="album">
										<img
											src="./img/singer_01.jpeg"
											alt=""
										/>
									</div>
									<div class="info">
										<div class="singer">张惠妹aMEI</div>
										<div class="desc">台湾歌手张惠妹</div>
									</div>
								</a>
							</li>
						</ul>
						<div class="apply btn_sprite btn_type_01_sup">
							<i class="btn_sprite btn_type_01_sub"
								>申请成为网页音乐人</i
							>
						</div>
					</div>

					<div class="hot-anchor">
						<div class="header_type_01">
							<div class="title">热门主播</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
